import {
  Authenticator,
  Button,
  Heading,
  Image,
  Text,
  View,
  useAuthenticator,
  useTheme,
} from '@aws-amplify/ui-react';

import { Example } from '@/components/Example';
import { Fragment } from '@/components/Fragment';
import {SocialProviderDemo} from '@/components/SocialProviderDemo' 

## Headers & Footers

The Authenticator has several "slots" that you can customize to add messaging & functionality to meet your app's needs.

The following example customizes these slots with:

- Custom header above the Authenticator with the Amplify logo
- Custom footer below the Authenticator with _© All Rights Reserved_
- Custom Sign In header with _Sign in to your account_
- Custom Sign In footer with a _Reset Password_ link
- Custom Sign Up header with _Create a new account_
- Custom Sign Up footer with a _Back to Sign In_ link
- Custom Confirm Sign Up header with an _Enter Information_ header
- Custom Confirm Sign Up footer with a _Footer Information_ message

<Fragment>
  {({ platform }) => import(`./headers-and-footers.${platform}.mdx`)}
</Fragment>

<Example>
  <SocialProviderDemo components={{
      Header() {
        const { tokens } = useTheme();
        return (
          <View textAlign="center" padding={tokens.space.large}>
            <Image alt="Amplify logo" src="/amplify-logo.svg" />
          </View>
        );
      },
      Footer() {
        const { tokens } = useTheme();
        return (
          <View textAlign="center" padding={tokens.space.large}>
            <Text color={tokens.colors.neutral[80]}>
              &copy; All Rights Reserved
            </Text>
          </View>
        );
      },
      SignIn: {
        Header() {
          const { tokens } = useTheme();
          return (
            <Heading
              padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
              level={3}
            >
              Sign in to your account
            </Heading>
          );
        },
        Footer() {
          const { toResetPassword } = useAuthenticator();
          return (
            <View textAlign="center">
              <Button
                fontWeight="normal"
                onClick={toResetPassword}
                size="small"
                variation="link"
              >
                Reset Password
              </Button>
            </View>
          );
        },
      },
      SignUp: {
        Header() {
          const { tokens } = useTheme();
          return (
            <Heading
              padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
              level={3}
            >
              Create a new account
            </Heading>
          );
        },
        Footer() {
          const { toSignIn } = useAuthenticator();
          return (
            <View textAlign="center">
              <Button
                fontWeight="normal"
                onClick={toSignIn}
                size="small"
                variation="link"
              >
                Back to Sign In
              </Button>
            </View>
          );
        },
        ConfirmSignUp: {
          Header() {
            const { tokens } = useTheme();
            return (
              <Heading
                padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
                level={3}
              >
                Enter Information:
              </Heading>
            );
          },
          Footer() {
            return <Text>Footer Information</Text>;
          },
        },
      },

  }}/>
</Example>